<%--
  Created by IntelliJ IDEA.
  User: W
  Date: 2025/9/29
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件上传和下载</title>
</head>
<body>
<%--使用form表单进行文件上传时，必须要设置enctpye属性，而且这个属性值必须是multipart/form-data--%>
    <form action="upload" method="post" enctype="multipart/form-data">
        <input type="text" name="name">
        <input type="file" name="uploadFile">
        <input type="submit" value="上传">
    </form>

    <input type="file" id="uploadFile">
    <input type="button"  value="上传" id="uploadBtn">

    <a href="download?name=图片.gif">图片.gif</a>

</body>
</html>

<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function(){
        $("#uploadBtn").click(function(){
            let formData = new FormData();//创建一个formData对象,模拟表单数据
            let file = $("#uploadFile")[0].files[0];
            formData.append('file' , file);
           $.ajax({
               url:"upload",
               type:"post",
               data:formData,
               processData: false, //告诉jQuery不要处理数据
               contentType: false,//告诉jQuery不要设置内容的类型
               success:function (resp){
                    alert(resp);
               },
               error:function (error){

               }
           })
        });
    })
</script>